<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>工资信息管理系统</title>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/isLoginUser.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		body {
			padding: 0px 50px;
			display: flex;
		}

		.left {
			flex: 1;
			height: calc(100vh - 70px);
			overflow-y: auto;
			padding-top: 20px;
			padding-bottom: 50px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 50px 30px;
		}
	</style>
	<body>
		<div class="left">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
				<legend>年度工资</legend>
			</fieldset>
			<ul class="layui-timeline">
				
				<li class="layui-timeline-item" id="listAll">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title" style="color: rgba(0,0,0,0.5);font-size: 14px;">入职...</h3>
					</div>
				</li>
			</ul>
		</div>
		<div class="right">

		</div>
		<script type="text/javascript">
		$(function() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts
					.init(document.getElementsByClassName('right')[0]);
			// 指定图表的配置项和数据
			var option = {
				title : {
					text : '月度工资',
					subtext : "实发工资"
				},
				tooltip : {},
				legend : {
					data : [ '实发工资', '实发工资-线条' ]
				},
				xAxis : {
					data : []
				},
				yAxis : {

				},
				series : [ {
					name : '实发工资',
					type : 'bar',
					data : [],
					itemStyle : {
						normal : {
							color : '#009688'
						},
					}
				}, {
					name : '实发工资-线条',
					type : 'line',
					smooth : false,
					data : [],
					itemStyle : {
						normal : {
							color : '#5F6368'
						},
					}
				}, ],
				dataZoom : {
					realtime : true, //拖动滚动条时是否动态的更新图表数据
					height : 25, //滚动条高度
					start : 10, //滚动条开始位置（共100等份）
					end : 100
				//结束位置（共100等份）
				}
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);

			//根据窗口的大小变动图表 --- 若有多个图表，可以写多个
			window.onresize = function() {
				myChart.resize();
			}

			$.ajax({
				url : "getIdWageNow",
				type : "post",
				data : {

				},
				success : function(result) {

					var year = "";
					var data = "";

					for (var i = 0; i < result.length; i++) {
						if (result[i].wage_time.split("-")[0] != year) {
							year = result[i].wage_time.split("-")[0];
							if(year != ""){
								data += '</div></li>';
							}
							data += '<li class="layui-timeline-item">'
								+'<i class="layui-icon layui-timeline-axis"></i>'
								+'<div class="layui-timeline-content layui-text">'
									+'<h3 class="layui-timeline-title">'+year+'年</h3>'
									+'<p>'+result[i].wage_time+'：基本工资'+result[i].wage_basic+'+奖金'+result[i].wage_bonus+'</p>';
								
						} else {
							data += '<p>'+result[i].wage_time+'：基本工资'+result[i].wage_basic+'+奖金'+result[i].wage_bonus+'</p>';
						}
					}

					

					$("#listAll").before(data);
					
					var datax = [];
					var datay = [];

					console.log(datax);
					console.log(datay);

					var y = "";
					var sum = 0;
					
					for (var i = 0; i < result.length; i++) {
						if(y != result[i].wage_time.split(" ")[0].split("-")[0]){
							datax.push(result[i].wage_time.split(" ")[0].split("-")[0]);
							y = result[i].wage_time.split(" ")[0].split("-")[0];
							if(sum != 0){
								datay.push(sum);
							}
							sum = 0;
							sum += (parseInt(result[i].wage_basic) + parseInt(result[i].wage_bonus));
						}else{
							sum += (parseInt(result[i].wage_basic) + parseInt(result[i].wage_bonus))
						}
					}
					
					datay.push(sum);
					
					myChart.setOption({
						xAxis : {
							data : datax
						},
						series : [
								{
									name : '实发工资',
									type : 'bar',
									data : datay,
									itemStyle : {
										normal : {
											color : '#009688'
										},
									}
								},
								{
									name : '实发工资-线条',
									type : 'line',
									smooth : false,
									data : datay,
									itemStyle : {
										normal : {
											color : '#5F6368'
										},
									}
								}, ]
					});
					
					
				},
				error : function(e) {
					console.log(e.status);
				}
			});

		});
		</script>
	</body>
</html>
